<template>
    <div class="topbar">
        <div class="nav">
            <ul>
                <li>欢迎您， <span style="color: rgb(6 157 26);">{{ loginUser }}</span></li>
                <li v-if="loginUser !== '游客'">
                    <button type="button" style="background-color: #3d3d3d; color: #ced3e5;" @click="sysLogout">系统登出
                    </button>
                </li>
                <li>
                    <router-link to="/personal">个人信息</router-link>
                </li>
                <li>
                    <router-link to="/shopOrder">我的订单</router-link>
                </li>
                <li>
                    <router-link to="/collect">我的收藏</router-link>
                </li>
                <li :class="'shopCart-full'">
                    <router-link to="/shopCar">
                        <i class="el-icon-shopping-cart-full"></i> 购物车
                        <span class="num">({{ carCount }})</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {logout} from "@/api/system/login"

export default {
    name: "Top-Header",
    props: {
        loginUser: String,
        carCount: String
    },
    inject: ['reload'],
    data() {
        return {
            userName: ''
        }
    },
    methods: {
        sysLogout() {
            let user = sessionStorage.getItem("admin-user") ? JSON.parse(sessionStorage.getItem("admin-user")) : {};
            if (Object.keys(user).length === 0) {
                return
            }
            logout(user.id).then(res => {
                this.$message.success("退出成功")
                sessionStorage.removeItem("admin-token")
                sessionStorage.removeItem("admin-user")
                sessionStorage.removeItem("admin-userName")
                sessionStorage.removeItem("admin-carNum")
                this.loginUser = '游客'
                this.carCount = '0'
                this.pageReload()
                this.$router.push({path: '/index'})
            })
        },
        
        // 界面刷新
        pageReload() {
            this.reload()
        },
    },
}
</script>

<style scoped>

</style>
